<template>
  <div id="app">
    <p>购物车</p>
    <div class="item" v-for="item of lists" :key="item.id"> 
      <van-checkbox class="choose" v-model="item.isSelected"></van-checkbox>
      <van-card
        :price="item.productPrice"
        :desc="item.productInfo"
        :title="item.productName"
        :thumb="item.productCover"
      >
       <div slot="bottom">
    <van-tag plain type="danger">小计:{{item.productCount*item.productPrice | money(2)}}</van-tag>
  
  </div>
        <div slot="footer">
           <van-stepper v-model="item.productCount" integer />
          <van-button size="mini" type="danger" class="delete" @click="handleDelete(item)">删除</van-button>

        </div>
      </van-card>
      <van-submit-bar :price="sum*100" button-text="提交订单">
        <van-checkbox v-model="checkAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: "app",
  data() {
    return {
      lists:[]
    }
  },
  mounted(){
  var url = "http://yapi.demo.qunar.com/mock/35398/";
    this.axios.get(url).then(res=>{
      this.lists= res.data
    })
  },
filters:{
money(val,params){
  return "$"+val.toFixed(params)
}
},
computed:{
  checkAll:{
   get(){
      return this.lists.every(item =>item.isSelected);
   },
   set(val){
      this.lists.forEach(item =>(item.isSelected= val))
   }
  },
  sum(){
    var total = 0;
    for( let i=0;i<this.lists.length;i++){
      if(this.lists[i].isSelected){
        total=total+this.lists[i].productCount*this.lists[i].productPrice
      }else{
        continue;
      }
    }
    return total
  }
},
methods:{
  handleDelete(item){
  // var lists = this.lists.filter(value=>value!==item);
  // this.lists=lists
  Dialog.confirm({
  title: '单品',
  message: '确定删除吗？'
}).then(() => {
  // on confirm
  var lists = this.lists.filter(value=>value!==item);
  this.lists=lists
}).catch(() => {
  
  // on cancel
});
  }
}

};
</script>

<style>
.item{
  position: relative;
}
.choose{
  position: absolute;
  top:30px;
  z-index: 15;
}
.delete{
  position: absolute;
  right:30px;
  bottom: 60px;
}

</style>
